<template>
	<p class="header">
		<el-icon><Handbag /></el-icon>
		<span class="title">{{ projectName }} 项目 - 主计划配置</span>
	</p>
	<div class="operate">
		<el-button size="small" type="success" :icon="Plus" @click="handleOpenCreate">新增</el-button>
		<el-button size="small" type="primary" :icon="Edit" @click="handleOpenEdit">修改</el-button>
		<el-button size="small" type="danger" :icon="Delete" :disabled="!selectedTasks.length">
			删除
		</el-button>
	</div>
	<el-table
		size="small"
		:data="mainPlanTaskList"
		style="width: 100%"
		@selection-change="handleSelectionChange"
	>
		<el-table-column type="selection" />
		<el-table-column type="expand" label="查看子任务" width="100">
			<div style="width: 90%; margin-left: 10%">
				<div style="margin: 10px 0; font-weight: bold; font-size: 14px">子任务列表</div>
				<subtaskTable @createSubtask="createSubtask" />
			</div>
		</el-table-column>
		<el-table-column prop="id" label="序号" />

		<el-table-column prop="code" label="任务编码" />
		<el-table-column prop="name" label="任务名称" />
		<el-table-column prop="prev" label="上一级任务" />
		<el-table-column prop="next" label="下一级任务" />
		<el-table-column label="">
			<el-button type="success" :icon="Plus" circle @click="createSubtask" />
			<el-button type="primary" :icon="Edit" circle />
			<el-button type="danger" :icon="Delete" circle />
		</el-table-column>
	</el-table>

	<el-dialog v-model="taskDialogVisible" :title="taskDialogTitle" width="700" align-center>
		<div class="task-dialog-content">
			<el-form
				ref="ruleFormRef"
				style="max-width: 1000px"
				:model="formTaskData"
				:rules="formTaskDataRules"
				label-width="auto"
				class="form-taskdata"
				status-icon
				:inline="true"
				size="small"
			>
				<el-form-item label="上一级任务节点" prop="prev">
					<el-select class="form-select" v-model="formTaskData.prev" clearable>
						<el-option label="Zone one" value="shanghai" />
						<el-option label="Zone two" value="beijing" />
					</el-select>
				</el-form-item>
				<el-form-item label="下一级任务节点" prop="next">
					<el-select class="form-select" v-model="formTaskData.next" clearable>
						<el-option label="Zone one" value="shanghai" />
						<el-option label="Zone two" value="beijing" />
					</el-select>
				</el-form-item>
				<el-form-item label="主计划任务节点" prop="name">
					<el-input class="form-input" v-model="formTaskData.mainName" />
				</el-form-item>
				<el-form-item label="项目任务" prop="subTaskName">
					<el-select class="form-select" v-model="formTaskData.subTaskName" clearable>
						<el-option label="Zone one" value="shanghai" />
						<el-option label="Zone two" value="beijing" />
					</el-select>
				</el-form-item>
				<el-form-item label="开始时间" prop="startDate">
					<el-input class="form-input" v-model="formTaskData.startDate" />
				</el-form-item>
				<el-form-item label="结束时间" prop="endDate">
					<el-input class="form-input" v-model="formTaskData.endDate" />
				</el-form-item>
				<el-form-item label="项目配置">
					<el-checkbox v-model="formTaskData.mainName">
						项目主计划引擎优化生产与组装任务计划工时与起止时间
					</el-checkbox>
					<el-checkbox v-model="formTaskData.mainName">
						项目主计划引擎优化主计划节点起止时间
					</el-checkbox>
					<el-checkbox v-model="formTaskData.mainName">
						项目主计划引擎优化项目主计划交付周期
					</el-checkbox>
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="success" @click="handleDialogConfirm">保存并新增任务</el-button>
				<el-button type="primary" @click="handleDialogConfirm">保存</el-button>
				<el-button @click="taskDialogVisible = false">取消</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<style lang="scss" scoped>
.header {
	font-weight: bold;
	display: flex;
	align-items: center;

	.title {
		margin-left: 5px;
	}
}

.operate {
	// margin-top: 10px;
	margin-bottom: 10px;
}

.task-dialog-content {
}

.form-taskdata {
	.el-form-item {
		width: 43%;
	}
	.form-input,
	.form-select {
		width: 180px;
	}
}
</style>
<script lang="ts" setup>
import { Check, Delete, Edit, Message, Search, Star, Plus } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { ref, reactive } from 'vue';
import { mainPlanTaskList } from '../mockdata';
import subtaskTable from './subtaskTable.vue';

defineProps({
	projectName: String,
});

const emits = defineEmits(['createSubtask']);

/**
 * 选中的主任务列表
 */
let selectedTasks = ref<Object[]>([]);

/**
 * 处理表格选中项改变事件
 * @param _selections
 */
const handleSelectionChange = _selections => {
	selectedTasks.value = _selections;
	console.log(selectedTasks.value.length);
};

const taskDialogVisible = ref(false);

const taskDialogTitle = ref('');

/**
 * 打开新增主任务弹窗
 */
const handleOpenCreate = () => {
	taskDialogTitle.value = '新增任务';
	taskDialogVisible.value = true;
};

/**
 * 打开修改主任务弹窗
 */
const handleOpenEdit = () => {
	if (selectedTasks.value.length !== 1) {
		return ElMessage({ message: '请选中一项主任务进行修改', type: 'error' });
	}

	taskDialogTitle.value = '修改任务';
	taskDialogVisible.value = true;
};

const handleTaskDialogClose = () => {
	taskDialogVisible.value = false;
};

const handleDialogConfirm = () => {};

const formTaskData = reactive({
	prev: '',
	next: '',
	mainName: '',
	subTaskName: '',
	startDate: '',
	endDate: '',
});

const formTaskDataRules = reactive({
	startDate: [
		{
			required: true,
			message: '开始时间必填',
		},
	],
	endDate: [
		{
			required: true,
			message: '结束时间必填',
		},
	],
});

const createSubtask = () => {
	emits('createSubtask');
};
</script>
